<template>
  <el-row style="width: 100%;">
    <!-- 渲染公司名称的时候,字体加粗 -->
    <el-col :span="12" :style="{fontWeight: !isDept?'bold':''}">{{ treeNode.name }}</el-col>
    <el-col :span="12">
      <!-- row组件， 支持flex布局 -->
      <el-row type="flex" justify="end">
        <span class="manager">{{ treeNode.manager }}</span>
        <el-dropdown>
          <span>操作<i class="el-icon-arrow-down" /></span>
          <!-- slot="dropdown" 表示插槽名为dropdown-->
          <!-- 这个语法是比较旧的语法,我们学的是 template标签结合v-slot:插槽名 来使用-->
          <!-- <el-dropdown-menu slot="dropdown"> -->
          <template v-slot:dropdown>
            <el-dropdown-menu>
              <!-- 下拉选项 -->
              <el-dropdown-item v-show="checkBtnPerm('add-department')" @click.native="addFn">添加子部门</el-dropdown-item>
              <!-- 根据isDept判断是否渲染下面两个操作 -->
              <el-dropdown-item v-show="checkBtnPerm('edit-department')" v-if="isDept" @click.native="editFn">编辑部门</el-dropdown-item>
              <el-dropdown-item v-show="checkBtnPerm('del-department')" v-if="isDept" @click.native="delFn">删除部门</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  // 接收父组件传过来的数据
//   props: ['treeNode']
  props: {
    treeNode: {
      type: Object, // 表示传入的数据类型必须是对象,如果不是对象则会报错
      required: true // 表示必传,也就是说用了该组件就一定要传treeNode,否则报错
    },
    // 是否渲染为一个部门,为true表示渲染为部门,否则渲染公司
    isDept: {
      // 设置一个isDept默认值   默认为部门
      default: true,
      type: Boolean
    }
  },
  methods: {

    addFn() {
      // console.log(47)
      // 子传父,通知父组件,显示弹窗,告诉父组件给谁添加部门
      this.$emit('addEvent', this.treeNode.id)
    },
    delFn() {
      this.$emit('delEvent', this.treeNode.id)
    },
    editFn() {
      this.$emit('editEvent', this.treeNode.id)
    }
  }
}
</script>

<style lang="scss" scoped>
// 我们可以直接把组件名当成标签来使用
// 因此组件封装的时候就是把组件名设置该组件根标签的类名
.el-card{
  font-size: 14px;
  .manager{
    margin-right: 10px;
  }
}

</style>
